Buefy is a UI framework that’s based on Bulma.
In this article, we’ll look at how to use Buefy in our Vue app.
Table
Buefy comes with a table component. It can be used to display data responsively.
We can use the b-table to add a simple table to our Vue app:
<template>
<div id="app">
<b-table :data="data" :columns="columns"></b-table>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
data: [
{
id: 1,
first_name: "james",
last_name: "smith"
},
{
id: 2,
first_name: "mary",
last_name: "jones"
},
{
id: 3,
first_name: "alex",
last_name: "wong"
}
],
columns: [
{
field: "id",
label: "ID",
width: "40",
numeric: true
},
{
field: "first_name",
label: "First Name"
},
{
field: "last_name",
label: "Last Name"
}
]
};
}
};
</script>
The data prop has an array of data.
columns has the column definitions. The field property has the property name. label has the column label.
The width has the column width.
Custom Columns
We can add the b-table-column column to add the columns. For example, we can write:
<template>
<div id="app">
<b-table :data="data" :columns="columns">
<b-table-column field="id" label="ID" width="40" numeric v-slot="props">{{ props.row.id }}</b-table-column>
<b-table-column
field="first_name"
label="First Name"
v-slot="props"
>{{ props.row.first_name }}</b-table-column>
<b-table-column field="last_name" label="Last Name" v-slot="props">{{ props.row.last_name }}</b-table-column>
</b-table>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
data: [
{
id: 1,
first_name: "james",
last_name: "smith"
},
{
id: 2,
first_name: "mary",
last_name: "jones"
},
{
id: 3,
first_name: "alex",
last_name: "wong"
}
],
columns: [
{
field: "id",
label: "ID",
width: "40",
numeric: true
},
{
field: "first_name",
label: "First Name"
},
{
field: "last_name",
label: "Last Name"
}
]
};
}
};
</script>
We added the b-table-column to add the columns.
props.row has the row object.
Custom Table
b-table has many props that we can change.
For example, we can write:
<template>
<div id="app">
<b-table
:data="data"
:columns="columns"
bordered
striped
narrowed
hoverable
loading
focusable
mobile-cards
></b-table>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
data: [
{
id: 1,
first_name: "james",
last_name: "smith"
},
{
id: 2,
first_name: "mary",
last_name: "jones"
},
{
id: 3,
first_name: "alex",
last_name: "wong"
}
],
columns: [
{
field: "id",
label: "ID",
width: "40",
numeric: true
},
{
field: "first_name",
label: "First Name"
},
{
field: "last_name",
label: "Last Name"
}
]
};
}
};
</script>
to add the props.
bordered adds the borders.
striped makes the rows striped.
narrowed makes the rows shorter.
hoverable makes the rows hoverable.
loading shows the loading indicator over the table.
focusable makes the table focusable.
mobile-cards makes the mobile cards.
Selection
We can set the selected prop to make a row highlightable.
For example, we can write:
<template>
<div id="app">
<b-table :data="data" :columns="columns" :selected.sync="selected"></b-table>
</div>
</template>
<script>
export default {
name: "App",
data() {
const data = [
{
id: 1,
first_name: "james",
last_name: "smith"
},
{
id: 2,
first_name: "mary",
last_name: "jones"
},
{
id: 3,
first_name: "alex",
last_name: "wong"
}
];
return {
selected: data[1],
data,
columns: [
{
field: "id",
label: "ID",
width: "40",
numeric: true
},
{
field: "first_name",
label: "First Name"
},
{
field: "last_name",
label: "Last Name"
}
]
};
}
};
</script>
We added the selected prop with the reference to the row we want to highlight. Then we’ll see that it’s highlighted.
Conclusion
Buefy comes with a b-table component to let us add a table to a Vue app.
